<template>
	<view class="layout">
		<view class="picGroup">
			<view class="box add" @click="selectPic">+</view>
			<view class="box" v-for="(item,index) in pictures" :key="index">
				<image :src="dealImage(item)" mode="aspectFill"></image>
				<view class="close" @click="handleClose(item.fileID)">×</view>
				<view class="mask" v-if="!item.isEdit&&item.status == 1">{{item.progress}}%</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import dayjs from "dayjs"
	const pictures = ref([]);
	defineExpose({
		pictures
	})
	const dealImage = (item) => {
		console.log(item)
		if (item.isEdit) {
			return item.url
		} else {
			return item.temp
		}
	}
	const uploadFileObj = uniCloud.importObject("uploadFileObj");
	//{temp:"",fileID:"",url:"",status:2,progress:0}
	const selectPic = async () => {
		let file = await uni.chooseImage({
			count: 100
		})
		let newArr = file.tempFilePaths.map((item, index) => ({
			temp: item,
			name: file.tempFiles[index].name,
			status: 0,
			progress: 0
		}))
		pictures.value = [...pictures.value, ...newArr]
		dealAllpic()


	}
	const dealAllpic = async () => {
		let promises = pictures.value.map((item, i) => {
			item.status = 1

			let cloud = ajaxAll(i, item)

			return item
		});
		let data = await Promise.all(promises)
		console.log(data, pictures.value);
	}
	const ajaxAll = (i, item) => {
		let filename = dayjs().format("YYYYMMDD") + "/" + Date.now() + "/" + item.name;
		return new Promise((resolve, reject) => {
			uniCloud.uploadFile({
				filePath: item.temp,
				cloudPath: filename,
				onUploadProgress: event => {
					pictures.value[i].progress = Math.round(
						(event.loaded * 100) / event.total
					);
				},
			}).then((res) => {
				item.status = 2;
				let path =res.fileID// cloudToHttps(res.fileID);
				item.fileID = res.fileID;
				item.url = path;
				resolve(res)
			}).catch((err) => {
				reject(err)
			})

		})
	}

	const handleClose = (id) => {
		uploadFileObj.remove([id])
			.then(res => {
				console.log(res);
			})
		pictures.value = pictures.value.filter(item => item.fileID !== id);;
	}


	const cloudToHttps = (str) => {
		return str.replace("cloud://", "https://")
			.replace(str.split("/")[2], str.split("/")[2] + ".normal.cloudstatic.cn");
	}
</script>

<style lang="scss" scoped>
	.layout {
		padding: 15rpx 30rpx;

		.picGroup {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20rpx;

			.box {
				width: 100%;
				aspect-ratio: 1 / 1;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}

				.close {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					width: 40rpx;
					height: 40rpx;
					background: rgba(0, 0, 0, 0.6);
					color: #fff;
					border-radius: 50%;
					border: 1px solid #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					line-height: 0;
				}

				.mask {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: rgba(0, 0, 0, 0.6);
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.add {
				background: #eee;
				font-size: 90rpx;
				color: #333;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

	}
</style>